<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="telephone=no" name="format-detection">
    <title>黎世阁-添加地址</title>
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../personal.css/addPlace.css"/>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>



<header>
		<i class="iconfont left_jt">&#xe65b;</i>
		<div class="title">添加地址</div>
	</header>



<div class="one_box">
	<section class="edit_form">
		<section class="edit_item clearfix">
			<span>收货人</span>
			<input class="name" autofocus="autofocus" type="text" name="name" placeholder="韩雪">
		</section>
		<section class="edit_item clearfix">
			<span>手机号码</span>
			<input class="mobile" type="tel" name="mobile" placeholder="18835184226">
		</section>
		<section class="edit_item clearfix">
			<span>所在地区</span>
			<div class="area_choose clearfix">
				<span class="province">山西省</span>
				<span class="city">太原市</span>
				<span class="area">小店区</span>
			</div>
			<i class="iconfont more">&#xe61b;</i>
		</section>
		<section class="edit_item clearfix">
			<span>详细地址</span>
			<input class="mobile" type="text" name="mobile" placeholder="长风南一巷滨东花园8号楼1601">
		</section>
		<section class="edit_item default clearfix">
			<i class="iconfont check_2">&#xe72f;</i>
			<span class="default_zi">设为默认地址（每次购买时会首先默认使用该地址）</span>
		</section>
	</section>
	<!--列表结束-->
	<!--按钮开始-->
	<input class="input_btn" type="button" value="确认" />
	<!--按钮结束-->
</div>
<div class="two_box">
	<section class="areaList">
		<ul class="area_list">
			<li class="area_item">
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
		</ul>
	</section>
</div>
<div class="three_box">
	<section class="areaList">
		<ul class="area_list">
			<li class="area_item">
				<span class="area_name">北京市</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京市</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京市</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">北京市</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
		</ul>
	</section>
</div>
<div class="four_box">
	<section class="areaList">
		<ul class="area_list">
			<li class="area_item">
				<span class="area_name">朝阳区</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">二环区</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">三环区</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
			<li class="area_item">
				<span class="area_name">世界公园</span>
				<i class="iconfont">&#xe6a7;</i>
			</li>
		</ul>
	</section>
</div>





</body>
<script>
	$(".check_2").click(function(){
		if(!($(this).hasClass("check_1"))){
			$(this).html('&#xe730').addClass('check_1');
		}else{
			$(".check_2").html('&#xe72f').removeClass('check_1');
		}
	});
	
	
	
	$(".more").click(function(){
		
		$(this).parent().addClass("beijing").siblings().removeClass('beijing');
		
	    $(".one_box").fadeOut();
        setTimeout("$('.two_box').css('-webkit-transform','translate(-100%,0)')",200);
        $(".two_box").show(500);
	});

	$(".two_box li").click(function(){
		$(".two_box li").removeClass('beijing');
		$(".province").text($(this).find('.area_name').text());
		$(this).addClass("beijing");
		$(".two_box").fadeOut();
		setTimeout("$('.three_box').css('-webkit-transform','translate(-100%,0)')",200);
		$(".three_box").show(500);
	});
	
	$(".three_box li").click(function(){
		$(".three_box li").removeClass('beijing');
		$(this).addClass("beijing");
		$(".city").text($(this).find('span').text());
		$(".three_box").fadeOut(100);
		setTimeout("$('.four_box').css('-webkit-transform','translate(-100%,0)')",200);
		$(".four_box").show(300);
	});
	
	$(".four_box li").click(function(){
		$(this).addClass("beijing");
		$(".area").html($(this).find('span').html());
//		$(".three_box").hide();
		setTimeout('$(".four_box").fadeOut()',100);
//		$(".two_box").hide();
		setTimeout('$(".one_box").show()',200);
		$(".one_box .edit_item").removeClass("beijing");
		setTimeout('$(".area_item").removeClass("beijing")',300);
//		$(".name").focus();
	})
</script>
</html>
